<template>
    <ul class="l_tree">
        <li class="l_tree_branch" v-if="item.show" v-for="item in data" :key="item.id" style="font-size: 14px;">

            <div class="l_tree_click">

                <span class="folder2" @click="toggle1(item)" :class="'k_'+item.id">{{ item.name }}</span>
            </div>
            <anchor-point v-if="item.children && item.children.length > 0" :data="item.children"
                          @on-children="toggle1"></anchor-point>
        </li>
    </ul>
</template>

<script>


    export default {
        name: "anchorPoint",
        props: {
            data: {
                type: Array,
                default: function () {
                    return []
                }
            },
        },
        data() {
            return {}
        },
        mounted() {
            this.initStyle();
        },


        methods: {
            //初始颜色
            initStyle() {
                let objClass1 = document.getElementsByClassName('k_2')
                objClass1[0].style.color = '#499CF0'
            },

            toggle1(item) {
                if (item.children.length == 0) {
                    this.$emit('on-children', item)
                }

                //样式
                let classNames1 = document.getElementsByClassName('folder2');
                for (let i = 0; i < classNames1.length; i++) {
                    classNames1[i].style.color = "#000000";
                    classNames1[i].style.background = "";
                }


                let objClass1 = document.getElementsByClassName('k_' + item.id)
                if (objClass1.length > 0 && objClass1[0].classList[1] == 'k_' + item.id) {
                    objClass1[0].style.color = "#499CF0";
                }

            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/pointStyle.less';
</style>
